<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} {% endblock %}</title>
    <!-- ico 图标 -->
    <link rel="shortcut icon" href="/static/favicon.ico">
    <!-- bootstrap 样式 -->
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css">
    <!-- 基础样式 -->
    <link rel="stylesheet" href="/static/css/base.css">
    <!-- index 样式 -->
    <link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<!-- nav  -->
<header>
    <!-- logo -->
    <div class="logo">
        <a href="#" title="微课商城">微课商城</a>
    </div>
    <!-- nav -->
    <nav>
        <ul>
            <li><a href="{% url 'course_index' %}">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
    </nav>

    <!-- search -->
    <div class="col-lg-3 search">
        <div class="input-group">
            <input type="text" class="form-control" placeholder="输入搜索内容">
            <span class="input-group-btn">
					<button class="btn btn-default" type="button">搜索</button>
				</span>
        </div>
    </div>

    <!-- 个人中心 -->
    <div class="personal">
        <dl>
            <dd>
                {% if not session_user %}
                    <a href="" data-toggle="modal" data-target="#login">登录</a>|
                    <a href="" data-toggle="modal" data-target="#register">注册</a>
                {% else %}
                    <span>
						<img src="/static/images/pic.png" alt="">
						<a href="{% url 'user_index' %}">{{ session_user.account }}</a>
					</span>
                    <a href="{% url 'user_logout' %}">注销</a>
                {% endif %}
            </dd>
        </dl>
    </div>

</header>
{% block article %}

{% endblock %}

<div
        {% if not login_message %}
            class="modal fade"
        {% else %}
            class=" modal fade in"
            style="display: block; padding-right: 17px;"
        {% endif %}
            id="login" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">欢迎登录</h4>
                <p class="danger"> {{ login_message }}</p>
            </div>
            <div class="modal-body">
                <form action="{% url 'user_login' %}" method="post">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="account" class="control-label">账号:</label>
                        <input type="text" class="form-control" id="account" name="account">
                    </div>
                    <div class="form-group">
                        <label for="password" class="control-label">密码:</label>
                        <input type="password" name="password" id="password" class="form-control">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <input type="submit" class="btn btn-primary" value="登录">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div
        {% if not register_message %}
            class="modal fade"
        {% else %}
            class=" modal fade in"
            style="display: block; padding-right: 17px;"
        {% endif %} id="register" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">欢迎注册</h4>
                <p class="register_message"> {{ register_message }}</p>
            </div>
            <div class="modal-body">
                <form action="{% url 'user_register' %}" method="post" id="register">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="account" class="control-label">用户名:</label>
                        <input type="text" class="form-control" id="account" name="account">
                    </div>
                    <div class="form-group">
                        <label for="password" class="control-label">密码:</label>
                        <input type="password" name="password" id="password" class="form-control">
                    </div>
                    <input type="submit" class="btn btn-primary" value="注册">
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 页面底部 -->
<footer>
    <div class="w">
        <div class="footer-l">

            <p>致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br/>
                © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
            <a href="#">下载APP</a>
        </div>
        <div class="footer-r"></div>
    </div>
</footer>

<script src="/static/js/jQuery-v3.4.1.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
    $(".close").click(function () {
        $("#login").removeClass("in");
        $("#login").removeAttr("style");
        $("#register").removeClass("in");
        $("#register").removeAttr("style");
    });
</script>
{% block js %}
{% endblock %}
</body>
</html>